<script setup lang="ts">
import { ref, onMounted } from 'vue'

import { getRoleListApi } from '@/api/setting'

import type { RoleItem } from '@/types/setting'

const queryData = ref({
  page: 1,
  pagesize: 10
})

const total = ref(0)

const userInfo = ref<RoleItem[]>([])

async function getRoleList() {
  const res = await getRoleListApi(queryData.value)
  total.value = res.data.total
  userInfo.value = res.data.rows
}

onMounted(() => {
  getRoleList()
})

function onCreateRole() {}

function onAssignPrem(row: RoleItem) {}

function onEditRole(row: RoleItem) {}

function onDeletePrem(row: RoleItem) {}
</script>
<template>
  <div class="role-com">
    <div class="button-group">
      <el-button @click="onCreateRole"></el-button>
    </div>

    <el-table
      :data="userInfo"
      :default-sort="{ prop: 'date', order: 'descending' }"
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="150" />
      <el-table-column prop="name" label="角色名" sortable width="150" />
      <el-table-column prop="description" label="描述" sortable />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="() => onAssignPrem(scope.row)">
            分配权限
          </el-button>

          <el-button link type="primary" size="small" @click="() => onEditRole(scope.row)">
            修改
          </el-button>

          <el-button link type="primary" size="small" @click="() => onDeletePrem(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style scoped>
.role-com {
  padding: 30px;
  .button-group {
    height: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
</style>
